<template>
  <footer class="nav-footer">
    <div class="footer-content">
      <div class="footer-section">
        <h3>DataTool</h3>
        <p>© 2024 DataTool. All rights reserved.</p>
      </div>
      
      <div class="footer-section">
        <h3>{{ $t('nav.download') }}</h3>
        <ul>
          <li v-for="platform in supportedPlatforms" :key="platform.name">
            <a :href="platform.url" target="_blank">{{ platform.name }}</a>
          </li>
        </ul>
      </div>
      
      <div class="footer-section">
        <h3>{{ $t('nav.faqs') }}</h3>
        <ul>
          <li><router-link to="/faqs">{{ $t('nav.faqs') }}</router-link></li>
          <li><router-link to="/blog">{{ $t('nav.blog') }}</router-link></li>
        </ul>
      </div>
    </div>
  </footer>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'NavFooter',
  computed: {
    ...mapState(['supportedPlatforms'])
  }
}
</script>

<style lang="scss" scoped>
.nav-footer {
  background-color: #f5f5f5;
  padding: 40px 0;
  margin-top: 40px;

  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    padding: 0 20px;
  }

  .footer-section {
    h3 {
      color: #333;
      margin-bottom: 20px;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        margin-bottom: 10px;

        a {
          color: #666;
          text-decoration: none;
          transition: color 0.3s;

          &:hover {
            color: #409EFF;
          }
        }
      }
    }
  }
}
</style> 